<template>
  <div :id="withKeyId" class="yjs-container"></div>
</template>
<script setup lang="ts">
import { imageViewerEmits } from "element-plus";
import { syncBuiltinESMExports } from "module";
import { computed, getCurrentInstance, onBeforeUnmount, onMounted ,inject} from "vue";
import commoncart from "@/components/commonCard/index.vue";
import * as echarts from "echarts";
import axios from "axios";
import { appendFile } from "fs";
// import { isPc } from "@/utils/index"
// import "../../../public/lib/cesiumjs/plugins/navigation/mars3d-navigation.css"
// import * as cesiumNavigation from "../../../public/lib/cesiumjs/plugins/navigation/yjs-navigation.js"
const instance = getCurrentInstance();
const {appContext} = getCurrentInstance();
const yjs = instance?.appContext.config.globalProperties.yjs;
const Cesium = instance?.appContext.config.globalProperties.Cesium;
const api = instance?.appContext.config.globalProperties.api;
// const navigation = cesiumNavigation
// props选项
const props = withDefaults(
  defineProps<{
    url: string;
    mapKey?: string;
    options: any;
  }>(),
  {
    url: "",
    mapKey: "default",
    options: () => ({}),
  }
);

// 用于存放地球组件实例
let map: any = null;
let viewerEx:any=null;
let mapDom:any=null;

// 使用用户传入的 mapKey 拼接生成 withKeyId 作为当前显示容器的id
const withKeyId = computed(() => `yjs-container-${props.mapKey}`);
const userData=inject("userData")

onMounted(() => {
  initMars3d(props.url);
  // initViewEx(props.url);
});

// onload事件将在地图渲染后触发
const emit = defineEmits(["onload"]);
const initMars3d = (option: any) => {
  // map = new mars3d.Map(withKeyId.value, option)
  // emit("onload", map)
  yjs.createMap({
    id: withKeyId.value,
    url: option,
    center: {
      x: 121.169223,
      y: 31.330908,
      z: 63864.892325,
      heading: 348,
      pitch: -70,
      roll: 0,
    },
    success: (_viewer: any, jsondata: any) => {
      map = _viewer;
      window.viewer = _viewer;
      emit("onload", map);
      initMap();

      // eslint-disable-next-line @typescript-eslint/no-empty-function
      // map.jrism.openFlyAnimation(function () {

      // })
    },
  });
};
function initMap() {
  addRegionGraphics();
  
  // imageryProvider();
  addtileset();

  
  // addDivpoint();
}
////天地图地形服务 目前支持cesuim1.52、1.58、1.63.1
// function addTerrainProvider(){
//    var token = '310c1c73c275e041865dda53ed1a0ed2';
//     // 服务域名
//     var tdtUrl = 'https://t{s}.tianditu.gov.cn/';
//     // 服务负载子域
//     var subdomains=['0','1','2','3','4','5','6','7'];

//      // 叠加地形服务
//     var terrainUrls = [];

//     for (var i = 0; i < subdomains.length; i++){
//         var url = tdtUrl.replace('{s}', subdomains[i]) + 'DataServer?T=elv_c&tk=' + token;
//         terrainUrls.push(url);
//     }

//     var provider = new Cesium.GeoTerrainProvider({
//         urls: terrainUrls
//     });

//     map.terrainProvider = provider;
// }

var key = [
  "313cd4b28ed520472e8b43de00b2de56",
  "83b36ded6b43b9bc81fbf617c40b83b5",
  "0ebd57f93a114d146a954da4ecae1e67",
  "6c99c7793f41fccc4bd595b03711913e",
  "56b81006f361f6406d0e940d2f89a39c",
];
function imageryProvider() {
  let layerimg_d = new Cesium.ImageryLayer(
    yjs.layer.createImageryProvider({
      type: "www_tdt",
      layer: "img_d",
      crs: "4326",
      key: key,
    }),
    {
      show: true,
      name: "img_d",
    }
  );
  let layerimg_z = new Cesium.ImageryLayer(
    yjs.layer.createImageryProvider({
      type: "www_tdt",
      layer: "img_z",
      crs: "4326",
      key: key,
    }),
    {
      show: true,
    }
  );
  let layervec_d = new Cesium.ImageryLayer(
    yjs.layer.createImageryProvider({
      type: "www_tdt",
      layer: "vec_d",
      crs: "4326",
      key: key,
    }),
    {
      show: false,
    }
  );
  let layervec_z = new Cesium.ImageryLayer(
    yjs.layer.createImageryProvider({
      type: "www_tdt",
      layer: "vec_z",
      crs: "4326",
      key: key,
    }),
    {
      show: false,
    }
  );

  map.imageryLayers.add(layerimg_d);
  map.imageryLayers.add(layerimg_z);
  map.imageryLayers.add(layervec_d);
  map.imageryLayers.add(layervec_z);
}

// 组件卸载之前销毁yjs实例
onBeforeUnmount(() => {
  if (map) {
    map.destroy();
  }
});
function clickme(str) {
  // console.log(str);
}
//添加行政区划、地块点、地块面
async function addRegionGraphics() {
  let userInfo=" ";
      await appContext.config.globalProperties.axios({
        url: `api/finduser?username=${userData.username}&userpassword=${userData.password}`,
        method: 'get',
        async:false, 
      }).then((response) => {
        response.data.forEach(item => {
          if(item.usertype=="0"){
            userInfo="";
          }else {
            userInfo="&cql_filter=town like '"+item.userxzq+"'";
          }
     
        })
      })

  const layer = new yjs.layer.GeoJsonLayer(
    {
      id: 1987,
      name: "太仓行政区划",
      url: "config/county.json",
      symbol: {
        styleOptions: {
          fill: false,
          randomColor: true, //随机色
          opacity: 0.1,
          outline: true,
          outlineColor: "#00FFFF",
          outlineWidth: 3,
          outlineOpacity: 1,
          label: {
            //面中心点，显示文字的配置
            text: "{XZQMC}", //对应的属性名称
            opacity: 1,
            font_size: 30,
            color: "#ffffff",

            font_family: "楷体",
            border: true,
            border_color: "#000000",
            border_width: 3,

            background: false,
            background_color: "#000000",
            background_opacity: 0.1,

            font_weight: "normal",
            font_style: "normal",

            scaleByDistance: true,
            scaleByDistance_far: 20000000,
            scaleByDistance_farValue: 0.1,
            scaleByDistance_near: 1000,
            scaleByDistance_nearValue: 1,

            distanceDisplayCondition: false,
            distanceDisplayCondition_far: 10000,
            distanceDisplayCondition_near: 0,
          },
        },
      },
      // popup: "{XZQMC}",
      // "tooltip": "{name}",
      visible: true,
      flyTo: false,
    },
    map
  );

  map.jrism.addOperationalLayer(layer);
  //WFS动态矢量点
  var dataSourcepoint = new Cesium.CustomDataSource("mylandpoint");
  window.viewer.dataSources.add(dataSourcepoint);
  axios
    .get(
      api.APILIST.geoserverURL +
        "/geoserver/taicang/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=taicang%3Alandpoint&maxFeatures=500&outputFormat=application%2Fjson"+userInfo
    )
    .then((result) => {
      
      result.data.features.forEach((feature) => {
          if(feature.geometry==null){
          return;
          } 

        let _prop=feature.properties;
        let _type =_prop.process;
        
        
        let _pointImg = "img/mark3.png";
        switch (_type) {
          case "1":
            _pointImg = "img/step1.png";
            break;
          case "2":
            _pointImg = "img/step2.png";
            break;
          case "3":
            _pointImg = "img/step3.png";
            break;
          case "4":
            _pointImg = "img/step4.png";
            break;
          case "5":
            _pointImg = "img/step5.png";
            break;
          case "6":
            _pointImg = "img/step6.png";
            break;
          default:
            _pointImg = "img/mark3.png";
            break;
        }

        var _entity = new Cesium.Entity({
          name: feature.id,
          position: Cesium.Cartesian3.fromDegrees(
            feature.geometry.coordinates[0],
            feature.geometry.coordinates[1],
            20
          ),
          billboard: {
            image: _pointImg,
            scale: 1,
            scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 40000, 0.5),
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
              0.0,
              60000
            ),
          },

          label: {
            text: feature.properties.bz,
            font: "normal small-caps normal 30px 楷体",
            style: Cesium.LabelStyle.FILL_AND_OUTLINE,

                    fillColor: Cesium.Color.AZURE,
                    outlineColor: Cesium.Color.BLACK,
                    outlineWidth: 2,
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 20000, 0.5),
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
              0.0,
              20000
            ),
             pixelOffset: new Cesium.Cartesian2(0, -16),
          },
                    popup: {
        html:
          '<div class="divpoint divpoint-theme-29baf1" style="pointer-events:all;">'+
            '<div class="divpoint-wrap">'+
                '<div class="area">'+
                    '<img class="imagegb" src="public/img/marker/关闭.png" alt="">'+
                        '<div class="title">'+
         _prop.bz +
          '</div><div class="label-content"><div class="data-li" style="padding:4px"><div class="data-label"  style="max-width: 200px;word-wrap: break-word;word-break: break-all;overflow: hidden;display: inline-block;white-space: normal;">' +
          "行政区划："+_prop.town+"</br>类型："+_prop.class+"</br>规划用途："+_prop.landtype+"</br>位置："+_prop.landloc+"</br>面积："+_prop.landarea+"亩</br>" +
          // '<button onclick="compare()">双屏对比</button></br>'+
          '<button onclick="timeLine()">时序浏览</button></br>'+
          '<button onclick="toggleClick('+_prop.landid+')">立体净地</button></br></div></div></div></div></div><div class="b-t-l"></div><div class="b-b-r"></div></div></div>',
      },
        });
        dataSourcepoint.entities.add(_entity);
      });
    });

  // var layerWFSPoint = yjs.layer.createLayer(
  //   {
  //     name: "landpoint",
  //     type: "wfs",
  //     url: api.APILIST.geoserverURL + "/geoserver/taicang/wfs",
  //     layer: "taicang:landpoint",
  //     parameters: {
  //       //支持所有wfs的参数
  //       maxFeatures: 500,
  //     },
  //     minimumLevel: 7,
  //     debuggerTileInfo: false,
  //     offset: {
  //       z: 50,
  //     },
  //     center: {
  //       z: 50,
  //     },
  //     symbol: {
  //       styleOptions: {
  //         image: "img/mark1.png",
  //         scale: 1.25,
  //         scaleByDistance: true,
  //         scaleByDistance_far: 60000,
  //         scaleByDistance_farValue: 0.5,
  //         scaleByDistance_near: 1000,
  //         scaleByDistance_nearValue: 1,
  //         // distanceDisplayCondition: true,
  //         // distanceDisplayCondition_far: 20000,
  //         // distanceDisplayCondition_near: 0,
  //         label: {
  //           text: "{bz}",
  //           font_size: 25,
  //           color: "#ffffff",
  //           border: true,
  //           border_color: "#000000",
  //           border_witdh: 3,
  //           pixelOffset: [0, -50],
  //           distanceDisplayCondition: true,
  //           distanceDisplayCondition_far: 6000,
  //           distanceDisplayCondition_near: 0,
  //         },
  //       },
  //       styleField: "process",
  //       styleFieldOptions: {
  //         "1": { image: "img/step1.png" },
  //         "2": { image: "img/step2.png" },
  //         "3": { image: "img/step3.png" },
  //         "4": { image: "img/step4.png" },
  //         "5": { image: "img/step5.png" },
  //         "6": { image: "img/step6.png" },
  //       },
  //     },
  //     // "clustering": {//点的聚合配置
  //     //     "enabled": true,
  //     //     "pixelRange": 48,
  //     //     "color": "#0000ff",
  //     //     "pixelSize": 48,
  //     // },
  //     popup: {
  //       html:
  //         `<div class="divpoint divpoint-theme-29baf1" style="pointer-events:all;">
  //           <div class="divpoint-wrap">
  //               <div class="area">

  //                   <img class="imagegb" src="public/img/marker/关闭.png" alt="">
  //                       <div class="title">` +
  //         "{bz}" +
  //         `</div>
  //                       <div class="label-content">
  //                           <div class="data-li" style="padding:4px">
  //                               <div class="data-label"  style="max-width: 200px;
  //                               word-wrap: break-word;
  //                               word-break: break-all;
  //                               overflow: hidden;
  //                               display: inline-block;
  //                               white-space: normal;">` +
  //         "行政区划：{town}</br>类型：{class}</br>规划用途：{landtype}</br>位置：{landloc}</br>面积：{landarea}亩</br>" +
  //         `<button onclick="clickme()">时序浏览</button></br>
  //         <button onclick="toggleClick({landid})">立体净地</button></br>
  //         </div>
  //                           </div>
  //                       </div>
  //                   </div>
  //               </div>
  //               <div class="b-t-l"></div>
  //               <div class="b-b-r"></div>
  //           </div>

  //       </div>`,
  //     },

  //     visible: true,
  //   },
  //   map
  // );
  // map.jrism.addOperationalLayer(layerWFSPoint);
  //WFS动态矢量面
  var dataSourceland = new Cesium.CustomDataSource("myland");
  window.viewer.dataSources.add(dataSourceland);
  axios
    .get(
      api.APILIST.geoserverURL +
        "/geoserver/taicang/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=taicang%3Aland&maxFeatures=500&outputFormat=application%2Fjson"+userInfo
    )
    .then((result) => {

      result.data.features.forEach((feature) => {
        // console.log(feature);
        
        if(feature.geometry!=null){
          let degArray = [];
        let _type = feature.properties.landstep;
        let _color;
        switch (_type) {
          case "1":
            _color = Cesium.Color.fromCssColorString("#D13939");
            break;
          case "2":
            _color = Cesium.Color.fromCssColorString("#CC5E5E");
            break;
          case "3":
            _color = Cesium.Color.fromCssColorString("#D6A356");
            break;
          case "4":
            _color = Cesium.Color.fromCssColorString("#4DC4D4");
            break; 
          case "5":
            _color = Cesium.Color.fromCssColorString("#5080CA");
            break;
          case "6":
            _color = Cesium.Color.fromCssColorString("#67C23A");
            break;
          default:
            _color = Cesium.Color.fromCssColorString("#00469c");
            break;
        }
        if (feature.geometry.type == "Polygon") {
          var coords = feature.geometry.coordinates[0];
          coords.forEach((coord) => {
            degArray = degArray.concat(coord);
          });
        } else if (feature.geometry.type == "MultiPolygon") {
          feature.geometry.coordinates.forEach((coordinate) => {
            coordinate[0].forEach((coord) => {
              degArray = degArray.concat(coord);
            });
          });
        }

        var _entity = new Cesium.Entity({
          name: feature.id,
          polyline: {
            positions: Cesium.Cartesian3.fromDegreesArray(degArray),
            width: 2.5,
            // arcType: Cesium.ArcType.NONE,
            material: _color,
            classificationType: Cesium.ClassificationType.BOTH,
            clampToGround: true,
            // material: new Cesium.ColorMaterialProperty(new Cesium.CallbackProperty(function (time) {
            //     return _color;
            // }, false)),
            //     depthFailMaterial: new Cesium.PolylineOutlineMaterialProperty(
            // {
            //   color: Cesium.Color.YELLOW,
            // }
            // ),
            // classificationType: Cesium.ClassificationType.BOTH,
          },
          polygon: {
            hierarchy: {
              positions: Cesium.Cartesian3.fromDegreesArray(degArray),
            },
            // extrudedHeight: 50,
            material: Cesium.Color.fromAlpha(_color, 0.5),
            classificationType: Cesium.ClassificationType.TERRAIN,
            // height: 0,
            // clampToGround:true,
            outline: true, // height is required for outline to display
          },
        });
        dataSourceland.entities.add(_entity);
        }       
      });
    });

  // var layerWFSPolygon = yjs.layer.createLayer(
  //   {
  //     type: "wfs",
  //     id:2022,
  //     name: "地块面",
  //     url: api.APILIST.geoserverURL+"/geoserver/taicang/wfs",
  //     layer: "taicang:land",
  //     parameters: {
  //       //支持所有wfs的参数
  //       maxFeatures: 2000,
  //     },
  //     minimumLevel: 8,
  //     symbol: {
  //       styleOptions: {
  //         color: "#00469c",
  //         outline: false,
  //         outlineColor: "red",
  //         outlineWidth: 3,
  //         outlineOpacity: 1,
  //         opacity: 0.5,
  //       },
  //       styleField: "landstep",
  //       styleFieldOptions: {
  //         "1": { color: "#D13939" },
  //         "2": { color: "#CC5E5E" },
  //         "3": { color: "#D6A356" },
  //         "4": { color: "#4DC4D4" },
  //         "5": { color: "#5080CA" },
  //         "6": { color: "#67C23A" },
  //       },
  //     },
  //     buildings: {
  //       cloumn: 10,
  //       height:50,
  //       bottomHeight:10
  //     },
  //     debuggerTileInfo: false,
  //     // popup: "名称：{town}<br />层数：{bz}",
  //     visible: true,
  //   },
  //   map
  // );
  //   map.jrism.addOperationalLayer(layerWFSPolygon);
}

function addtileset() {
  const modelLayer1 = yjs.layer.createLayer(
    {
      type: "3dtiles",
      name: "taicangdemo",

      // url: api.APILIST.tilesetURL,
      "url":   "/convert/tileset.json",//需要配置跨域否则会提示跨域错误，配置见vue.config.js
      maximumScreenSpaceError: 1,
      maximumMemoryUsage: 1024,
      // "center": {"y":31.687207,"x":120.282256,"z":819.06,"heading":346.4,"pitch":-49.7,"roll":0},
      showClickFeature: true,
      // "popup": "all",
      visible: false,
      offset: { z: 25 },
      flyTo: true,
    },
    map
  );
  map.jrism.addOperationalLayer(modelLayer1);
}

//添加统计信息
function addDivpoint() {
  const divpoint = new yjs.DivPoint(map, {
    html: ' <div id="SubwayPie1" style="width:160px; height: 140px;"></div><span>地图echarts</span></div>',
    position: Cesium.Cartesian3.fromDegrees(121.107866, 31.421644, 200),
    anchor: [0, 0],
    distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 100000),
    data: "pt",
    popup: "",
    click: function (entity: any) {
      // addInfoFlagPoint(entity.data,map)
      // if(entity.data.data.id==1){
      //     // shuxinzhaFW.show = true
      //     map.jrism.centerAt({"y":31.592776,"x":120.125369,"z":1273.35,"heading":343.8,"pitch":-59.6,"roll":0})
      // }else{
      //     // dianliFW.show = true
      //     map.jrism.centerAt({"y":31.662806,"x":120.256356,"z":344,"heading":358.6,"pitch":-52.9,"roll":0})
      // }
    },
  });
  var myChart = echarts.init(document.getElementById("SubwayPie1"));

  myChart.setOption({
    series: [
      {
        name: "访问来源",
        type: "pie", // 设置图表类型为饼图
        radius: "55%", // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
        data: [
          // 数据数组，name 为数据项名称，value 为数据项值
          { value: 235, name: "视频广告" },
          { value: 274, name: "联盟广告" },
          { value: 310, name: "邮件营销" },
          { value: 335, name: "直接访问" },
          { value: 400, name: "搜索引擎" },
        ],
      },
    ],
  });
}

function initViewEx(data){ 
  creatDom();
  // if(viewerEx == null){

  yjs.createMap({
    id: "cesiumContainerEx",
    url: data,
    center: {
      x: 121.169223,
      y: 31.330908,
      z: 63864.892325,
      heading: 348,
      pitch: -70,
      roll: 0,
    },
    success: (_viewer: any, jsondata: any) => {
      viewerEx = _viewer;
       window.viewer.camera.changed.addEventListener(_map_extentChangeHandler)
  window.viewer.camera.percentageChanged = 0.01

  viewerEx.camera.changed.addEventListener(_mapEx_extentChangeHandler)
  viewerEx.camera.percentageChanged = 0.01
    },
  });

  
    // }
}

function creatDom() {
  if(mapDom != null){
    const div= document.getElementById("centerDivEx")
    if(div){
        div.style.display="block"
    }
    return
  }
  mapDom = document.createElement("div")
  mapDom.setAttribute("id", "centerDivEx")

  const sourceContainer = document.createElement("div")
  sourceContainer.setAttribute("id", "cesiumContainerEx")
  sourceContainer.setAttribute("class", "yjs-container")
  mapDom.appendChild(sourceContainer)
  const originerContainer=document.getElementById("mapContainer")
  originerContainer.appendChild(mapDom)
}
function _map_extentChangeHandler() {
    viewerEx.camera.changed.removeEventListener(_mapEx_extentChangeHandler)
    updateView(window.viewer, viewerEx)
    viewerEx.camera.changed.addEventListener(_mapEx_extentChangeHandler)
}


function _mapEx_extentChangeHandler(e:any) {
    window.viewer.camera.changed.removeEventListener(_map_extentChangeHandler)
    updateView(viewerEx, window.viewer)
    window.viewer.camera.changed.addEventListener(_map_extentChangeHandler)
}
//“变化屏”viewerChange变化，将“被更新屏”viewerUpdate同步更新
function updateView(viewerChange:any, viewerUpdate:any) {
    var point = yjs.point.getCameraView(viewerChange)
    viewerUpdate.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(point.x, point.y, point.z),
        orientation: {
            heading: Cesium.Math.toRadians(point.heading),
            pitch: Cesium.Math.toRadians(point.pitch),
            roll: Cesium.Math.toRadians(point.roll)
        }
    })
}



</script>

<style>
.yjs-container {
  height: 100%;
  overflow: hidden;
}
#centerDivEx {
  width: 50%;
  height: 100%;
  right: 0px;
  position: absolute;
  display: none;
  
}

/**cesium 工具按钮栏*/
.cesium-viewer-toolbar {
  top: 20px;
  bottom: auto;
  right: 12px;
  left: auto;
}
.cesium-toolbar-button img {
  height: 100%;
}
.cesium-viewer-toolbar > .cesium-toolbar-button,
.cesium-navigationHelpButton-wrapper,
.cesium-viewer-geocoderContainer {
  margin-bottom: 5px;
  float: left;
  clear: both;
  text-align: center;
}
.cesium-button {
  background-color: #3f4854;
  color: #e6e6e6;
  fill: #e6e6e6;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  line-height: 32px;
}

/**cesium 底图切换面板*/
.cesium-baseLayerPicker-dropDown {
  bottom: 0;
  left: 40px;
  max-height: 700px;
  margin-bottom: 5px;
}

/**cesium 帮助面板*/
.cesium-navigation-help {
  top: 10px;
  bottom: auto;
  right: 40px;
  transform-origin: right bottom;
}

/**cesium 二维三维切换*/
.cesium-sceneModePicker-wrapper {
  width: auto;
}
.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-dropDown-icon {
  float: right;
  margin: 0 3px;
}

/**cesium POI查询输入框*/
.cesium-viewer-geocoderContainer .search-results {
  left: 0;
  right: 40px;
  width: auto;
  z-index: 9999;
}
.cesium-geocoder-searchButton {
  background-color: #3f4854;
}
.cesium-viewer-geocoderContainer .cesium-geocoder-input {
  background-color: rgba(63, 72, 84, 0.7);
}
.cesium-viewer-geocoderContainer .cesium-geocoder-input:focus {
  background-color: rgba(63, 72, 84, 0.9);
}
.cesium-viewer-geocoderContainer .search-results {
  background-color: #3f4854;
}

/**cesium info信息框*/
.cesium-infoBox {
  top: 50px;
  background: rgba(63, 72, 84, 0.9);
}
.cesium-infoBox-title {
  background-color: #3f4854;
}

/**cesium 任务栏的FPS信息*/
.cesium-performanceDisplay-defaultContainer {
  top: auto;
  bottom: 35px;
  right: 50px;
}
.cesium-performanceDisplay-ms,
.cesium-performanceDisplay-fps {
  color: #fff;
}

/**cesium tileset调试信息面板*/
.cesium-viewer-cesiumInspectorContainer {
  top: 10px;
  left: 10px;
  right: auto;
  background-color: #3f4854;
}

/* div Point 的样式 */
.yjs-popup-content {
  margin: 0px;
}
.divpoint {
  /*加上这个css后鼠标可以穿透，但是无法触发单击事件*/
  /* pointer-events:none;  */
}

.divpoint-wrap {
  position: relative;
  padding: 0;
  overflow: hidden;
}

.divpoint .area {
  position: relative;
  min-width: 180px;
}

.divpoint .b-t {
  position: absolute;
  top: 0;
  left: 44px;
  right: 0;
  height: 1px;
  z-index: 10;
}

.divpoint .b-r {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 44px;
  width: 1px;
  z-index: 10;
}

.divpoint .b-b {
  position: absolute;
  left: 0;
  right: 44px;
  bottom: 0;
  height: 1px;
  z-index: 10;
}

.divpoint .b-l {
  position: absolute;
  top: 44px;
  left: 0;
  bottom: 0;
  width: 1px;
  z-index: 10;
}

.divpoint .b-t-l {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 62px;
  transform: rotate(45deg) translate(52px, -22px);
  z-index: 10;
}

.divpoint .b-b-r {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 1px;
  height: 62px;
  transform: rotate(45deg) translate(-52px, 22px);
  z-index: 10;
}

.divpoint .label-wrap {
  padding-left: 12px;
  color: #fff;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
}

.divpoint .title {
  margin-top: 5px;
  padding: 0 10px;
  height: 36px;
  line-height: 36px;
  position: relative;
}

.divpoint .title::before {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  z-index: 10;
  height: 2px;
}

.divpoint .label-content {
  padding: 5px 0;
}

.divpoint .data-li {
  padding: 4px 45px 4px 0;
}

.divpoint .data-label,
.data-value {
  display: inline-block;
}

.divpoint .data-value {
  font-size: 14px;
}

.divpoint .label-num {
  margin-right: 3px;
  color: #f09e28;
  font-weight: 600;
}

.divpoint .label-tag {
  display: inline-block;
  position: relative;
  margin-right: 0;
  padding: 0 6px;
  font-weight: 600;
  cursor: pointer;
  background-color: #909399;
  border-radius: 4px;
}

.divpoint .label-tag::after {
  content: attr(alt);
  display: inline-block;
  position: absolute;
  bottom: -22px;
  right: -35px;
  z-index: -1;
  padding: 2px 4px;
  color: #fff;
  font-size: 14px;
  background-color: #333;
  border-radius: 3px;
  opacity: 0;
  transition: all 0.3s ease-in;
}

.divpoint .label-tag:hover::after {
  opacity: 1;
  z-index: 11;
}

.divpoint .data-value-status-0 {
  background-color: #f0285c;
}

.divpoint .data-value-status-1 {
  background-color: #35b15b;
}

.divpoint .data-value-status-2 {
  background-color: #f09e28;
}

.divpoint .arrow {
  position: absolute;
  bottom: 0;
  left: 100px;
  width: 45px;
  height: 2px;
  transform: rotate(-45deg) translate(5px, -15px);
}

/* 蓝色主题 */

.divpoint-theme-29baf1 .b-t,
.divpoint-theme-29baf1 .b-r,
.divpoint-theme-29baf1 .b-b,
.divpoint-theme-29baf1 .b-l,
.divpoint-theme-29baf1 .b-t-l,
.divpoint-theme-29baf1 .b-b-r {
  /* background-color: #29baf1; */
  /* box-shadow: 0 0 10px 2px #29baf1; */
}

.divpoint-theme-29baf1 .area {
  /* background: rgba(40, 187, 240, 0.6); */
  border-radius: 5px;
  /* background-image: linear-gradient(135deg, transparent 30px, #28bbf06c 30px, #28bbf06c 50%, transparent 50%),
        linear-gradient(-45deg, transparent 30px, #28bbf06c 30px, #28bbf06c 50.1%, transparent 50%); */
}

.divpoint-theme-29baf1 .title {
  /* background-image: linear-gradient(135deg, transparent 25px, #29baf1 25px); */
}

.divpoint-theme-29baf1 .arrow,
.divpoint-theme-29baf1 .title::before {
  background-color: #28bbf0;
}

/* 绿色主题 */

.divpoint-theme-06e34a .b-t,
.divpoint-theme-06e34a .b-r,
.divpoint-theme-06e34a .b-b,
.divpoint-theme-06e34a .b-l,
.divpoint-theme-06e34a .b-t-l,
.divpoint-theme-06e34a .b-b-r {
  background-color: #06e34a;
  box-shadow: 0 0 10px 2px #06e34a;
}

.divpoint-theme-06e34a .area {
  background-image: linear-gradient(
      135deg,
      transparent 30px,
      #06e3486c 30px,
      #06e3486c 50%,
      transparent 50%
    ),
    linear-gradient(
      -45deg,
      transparent 30px,
      #06e3486c 30px,
      #06e3486c 50.1%,
      transparent 50%
    );
}

.divpoint-theme-06e34a .title {
  background-image: linear-gradient(135deg, transparent 25px, #06e34a 25px);
}

.divpoint-theme-06e34a .arrow,
.divpoint-theme-06e34a .title::before {
  background-color: #06e34a;
}

/* 红色主题 */

.divpoint-theme-e3064f .b-t,
.divpoint-theme-e3064f .b-r,
.divpoint-theme-e3064f .b-b,
.divpoint-theme-e3064f .b-l,
.divpoint-theme-e3064f .b-t-l,
.divpoint-theme-e3064f .b-b-r {
  background-color: #e3064f;
  box-shadow: 0 0 10px 2px #e3064f;
}

.divpoint-theme-e3064f .area {
  background-image: linear-gradient(
      135deg,
      transparent 30px,
      #e306506c 30px,
      #e306506c 50%,
      transparent 50%
    ),
    linear-gradient(
      -45deg,
      transparent 30px,
      #e306506c 30px,
      #e306506c 50%,
      transparent 50%
    );
}

.divpoint-theme-e3064f .title {
  background-image: linear-gradient(135deg, transparent 25px, #e3064f 25px);
}

.divpoint-theme-e3064f .arrow,
.divpoint-theme-e3064f .title::before {
  background-color: #e3064f;
}

/* 黄色主题 */

.divpoint-theme-e9b709 .b-t,
.divpoint-theme-e9b709 .b-r,
.divpoint-theme-e9b709 .b-b,
.divpoint-theme-e9b709 .b-l,
.divpoint-theme-e9b709 .b-t-l,
.divpoint-theme-e9b709 .b-b-r {
  background-color: #e9b709;
  box-shadow: 0 0 10px 2px #e9b709;
}

.divpoint-theme-e9b709 .area {
  background-image: linear-gradient(
      135deg,
      transparent 30px,
      #e9b9096c 30px,
      #e9b9096c 50%,
      transparent 50%
    ),
    linear-gradient(
      -45deg,
      transparent 30px,
      #e9b9096c 30px,
      #e9b9096c 50%,
      transparent 50%
    );
}

.divpoint-theme-e9b709 .title {
  background-image: linear-gradient(135deg, transparent 25px, #e9b709 25px);
}

.divpoint-theme-e9b709 .arrow,
.divpoint-theme-e9b709 .title::before {
  background-color: #e9b709;
}
</style>
